<script setup lang="ts">
import { defineProps, ref, watch, computed } from 'vue';
import { useBooleanStore } from '@/store';
import { queryPackageByConsole } from '@/api/sorting-matching';

const emit = defineEmits(['consoleId', 'consoleNameTable']);
const props = defineProps<{
  tableData: any;
  tableDataConsole: any;
  consoleNameInput: string;
}>();
const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'id',
    slotName: 'id',
    align: 'center',
  },

  {
    title: '分拣台名称',
    dataIndex: 'consoleName',
  },
  {
    title: '分拣状态',
    dataIndex: 'consoleStatus',
  },
  {
    title: '分拣台IP',
    dataIndex: 'consoleIp',
  },
  {
    title: '主键',
    dataIndex: 'consoleId',
  },
];
const columnsTwo: any[] = [
  {
    title: '序号',
    dataIndex: 'PAGEHELPER_ROW_ID',
    ellipsis: true,
    tooltip: true,
    width: 80,
  },

  {
    title: '工作包编号',
    dataIndex: 'packageCode',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '工作包名称',
    dataIndex: 'packageName',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '机型',
    dataIndex: 'productCode',
    ellipsis: true,
    tooltip: true,
    width: 120,
  },
  {
    title: '批次',
    dataIndex: 'batchNo',
    ellipsis: true,
    tooltip: true,
    width: 120,
  },
  {
    title: '架次',
    dataIndex: 'startPlaneNo',
    ellipsis: true,
    tooltip: true,
    width: 120,
  },
  {
    title: '配套状态',
    dataIndex: 'state',
    ellipsis: true,
    tooltip: true,
    width: 120,
  },
  {
    title: '缺件类型',
    dataIndex: 'aState',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '分拣状态',
    dataIndex: 'sortingStatus',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '周计划时间',
    dataIndex: 'weekTime',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '日计划时间',
    dataIndex: 'dailyTime',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
  {
    title: '主键',
    dataIndex: 'msTaskPackageId',
    ellipsis: true,
    tooltip: true,
    width: 180,
  },
];
const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});

// 创建一个响应式的本地副本
const localTableData = ref<any[]>([]);
const localTwoTableData = ref<any[]>([]);
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(30);

const consoleName = ref<string>('');
const totalTwo = ref<number>(1);
const pageNumTwo = ref<number>(1);
const pageSizeTwo = ref<number>(30);

// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.retData || [];
    total.value = localTableData.value.length;
  },
  { immediate: true }
);
watch(
  () => props.tableDataConsole,
  () => {
    localTwoTableData.value = props.tableDataConsole?.retData || [];
    totalTwo.value = localTwoTableData.value.length;
  },
  { immediate: true }
);
watch(
  () => props.consoleNameInput,
  () => {
    consoleName.value = props.consoleNameInput;
  },
  { immediate: true }
);

function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}

// 点击行
async function showBottomData(recode: any) {
  emit('consoleNameTable', recode.consoleName);
  emit('consoleId', recode?.consoleId);
}


function changeTwo(e: any) {
  pageNumTwo.value = e;
}
function changeSizeTwo(e: any) {
  pageSizeTwo.value = e;
}

// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 22);
});
watch([pageNumTwo, pageSizeTwo], () => {
  booleanStore.setPage(pageNumTwo.value, pageSizeTwo.value, 23);
});

// 点击行
async function showBottomDataTwo(recode: any) {
  await booleanStore.setRow('');
  booleanStore.setRow(recode.msTaskPackageId, 2);
}
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">分拣台列表</div>
    </template>

    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      :scroll="{ y: 400 }"
      style="height: 250px"
      @row-click="showBottomData"
    >
      <template #id="{ record }">
        {{ localTableData.indexOf(record) + 1 }}
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div v-if="consoleName" class="font"
        >【{{ consoleName }}】的工作包列表</div
      >
      <div v-else class="font">工作包列表</div>
    </template>
    <a-table
      :stripe="true"
      class="table"
      :pagination="false"
      :columns="columnsTwo"
      :data="localTwoTableData"
      :scroll="{ y: 400 }"
      style="height: 250px"
      @row-click="showBottomDataTwo"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="totalTwo"
        :current="pageNumTwo"
        :page-size="pageSizeTwo"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="changeTwo"
        @update:page-size="changeSizeTwo"
      />
    </div>
  </a-card>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.table {
  white-space: nowrap;
}
</style>
